<template>
  <div class="home-recommend">
    <!-- 推荐部分 -->
     <h2 class="home-recommend-title">热门推荐</h2>
    <ul class="home-recommend-list">
      <li class="home-recommend-item" v-for="item of recommendList" :key="item.id">
        <img :src="item.imgUrl" />
        <div class="content">
          <h3 class="title">{{ item.title }}</h3>
          <span class="desc">{{item.desc}}</span>
          <router-link :to="`/detail/${item.id}`">查看详情</router-link>
        </div>
      </li>
    </ul>
    <!-- 周末游部分 -->
    <h2 class="home-recommend-title">周末去哪</h2>
    <ul class="home-recommend-list">
      <li class="home-weekend-item" v-for="item of weekendList" :key="item.id">
        <img :src="item.imgUrl" />
        <div class="content">
          <h3 class="title">{{ item.title }}</h3>
          <span class="desc">{{item.desc}}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
defineProps({
  recommendList: {
    type: Array,
    default: () => []
  },
  weekendList: {
    type: Array,
    default: () => []
  }
})
</script>

<style lang="scss" scoped>
.home-recommend {
  width: 100%;
  background-color: #fff;
  .home-recommend-title {
    color: #666;
    font-weight: bold;
    font-size: .42rem;
    padding-left: .2rem;
  }
  .home-recommend-list {
    width: 100%;
    .home-recommend-item {
      display: flex;
      width: 100%;
      padding:.2rem;
      margin-bottom: .2rem;
      img {
        width: 2.4rem;
        height: 2.4rem;
        object-fit: cover;
        border-radius: .2rem;
        padding-right: .2rem;
      }
      .content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        padding: .2rem 0;
        .title {
          font-size: .4rem;
          color: #333;
        }
        .desc {
          margin-top: .2rem;
          font-size: .35rem;
          color: #999;
        }
        a {
          display: inline-block;
          background-color: #f5a623;
          color: #fff;
          font-size: .35rem;
          font-weight: 700;
          padding: .1rem .2rem;
          border-radius: .2rem;
        }
      }
    }
    .home-weekend-item {
      display: flex;
      flex-direction: column;
      width: 100%;
      // height: 1.2rem;
      padding:.2rem;
      img {
        width: 100%;
        height: 2rem;
        object-fit: cover;
      }
      .content {
        .title {
          font-size: .4rem;
          color: #333;
          padding: .2rem 0;
        }
        .desc {
          margin-top: .2rem;
          font-size: .35rem;
          color: #999;
        }
      }
    }
  }
}
</style>
